import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getTypeList } from '../redux/typeSlice';
import styles from '../css/Interview.module.css'
// bbb
import { getInterviewTitleAsync } from '../redux/interviewSlice'

import PageHeader from '../components/PageHeader';
import { Tree ,BackTop} from 'antd'
import { getInterviewById } from '../api/interview';

function Interviews(props) {
    const { interviewTitleList } = useSelector(state => state.interview);
    const { typeList } = useSelector(state => state.type);
    const dispatch = useDispatch();
    const [treeData, setTreeData] = useState([])
    //该状态用于存储id对应的面试题内容
    const [interviewInfo, setInterviewInfo] = useState(null)

    // ccc 获取面试题标题
    useEffect(() => {
        //1.每个分类下面的面试题标题
        if (!interviewTitleList.length) {
            //初始化仓库里面的面试题标题
            dispatch(getInterviewTitleAsync());
        }
        //2.分类名
        if (!typeList.length) {
            dispatch(getTypeList());
        }
        //1 2准备好了以后 就可以开始组装 tree 组件所需的data数组
        if (interviewTitleList.length && typeList.length) {
            const arr = [] //最终组装的数据放入到该数组中
            //添加分类标题（第一级的for循环）
            for (let i = 0; i < typeList.length; i++) {
                arr.push({
                    title: (<h3 style={{ fontWeight: '300' }}>
                        {typeList[i].typeName}
                    </h3>),
                    key: i
                })
            }
            //添加分类下面的面试题标题（第二级的for循环）
            for (let i = 0; i < interviewTitleList.length; i++) {
                const childArr = []
                for (let j = 0; j < interviewTitleList[i].length; j++) {
                    childArr.push({
                        title: (<h4 style={{ fontWeight: '200' }} onClick={() => clickHandle(interviewTitleList[i][j]._id)}>
                            {interviewTitleList[i][j].interviewTitle}
                        </h4>),
                        key: `${i}-${j}`
                    })
                }
                arr[i].children = childArr
            }
            setTreeData(arr)
        }
    }, [interviewTitleList, typeList])

    async function clickHandle(id) {
        // console.log(id,'点击的对应id')
        const { data } = await getInterviewById(id)
        setInterviewInfo(data)
        // console.log(data,'点击的对应面试题')
    }

    let interviewRightSide = null;
    if (interviewInfo) {
        //有值 赋值为面试题的内容
        interviewRightSide = (
            <div className={styles.content}>
                <h1 className={styles.interviewRightTitle}>{interviewInfo?.interviewTitle}</h1>
                <div className={styles.contentContainer}>
                    <div dangerouslySetInnerHTML={{ __html: interviewInfo?.interviewContent }}></div>
                </div>
            </div>
        );
    } else {
        //没有值 在左侧选择面试题
        interviewRightSide = (
            <div style={{
                textAlign: "center",
                fontSize: "40px",
                fontWeight: "100",
                marginTop: "150px"
            }}>
                请在左侧选择面试题
            </div>
        )
    }


    return (
        <div className={styles.container}>
            <PageHeader title='面试题大全' />
            <div className={styles.interviewContainer}>
                <div className={styles.leftSide}>
                    < Tree
                        treeData={treeData}
                    />
                </div>
                <div className={styles.rightSide}>{interviewRightSide}</div>
            </div>
            <BackTop/>
        </div>
    );
}

export default Interviews;